<template>
  <div class="schedule o-a">
    <Page-title :title="title" />
    <div class="h447 f f-ai-c f-jc-c mt30">
      <div class="schedule-title f-col f-ai-c f-jc-c">排产计划</div>
      <div class="schedule-top-box w1721 ml56">
        <div class="table-th f f-ai-c">
          <div>流程</div>
          <div>料号</div>
          <div>计划生产量</div>
          <div>计划完成时间</div>
          <div>出货量</div>
          <div>结存量</div>
          <div>完成率</div>
        </div>
        <div id="table-body" class="table-body">
          <div v-if="scheduleList.length" id="table-body-box">
            <div v-for="(item, index) in scheduleList" :key="index" class="table-tr">
              <div>{{ item.flowPath || "-" }}</div>
              <div>{{ item.itemNumber || "-" }}</div>
              <div>{{ item.plannedProductionVolume || 0 }}</div>
              <div>{{ item.plannedCompletionTime || "-" }}</div>
              <div>{{ item.shipment || 0 }}</div>
              <div>{{ item.balance || 0 }}</div>
              <div>{{ item.completionRate || 0 }}%</div>
            </div>
            <div class="table-tr" />
          </div>
          <Empty v-else />
        </div>
      </div>
    </div>
    <div class="h447 f f-ai-c f-jc-c mt24">
      <div class="schedule-title f-col f-ai-c f-jc-c">周转率</div>
      <div class="schedule-row f f-ai-c">
        <div class="schedule-bottom-box1 w1075 ml56">
          <Line-chart
            v-if="turnoverYList.length"
            cid="schedule-rate1"
            :x-axis="turnoverXList"
            :data="turnoverYList"
            :y-line="false"
            :y-offset="10"
            name-location="start"
            name-gap="24"
            :type="['bar', 'line']"
            :tooltip="false"
            orient="horizontal"
            bar-width="50%"
            leg-left="4%"
            leg-top="4%"
            :bar-label="[true, false]"
            bar-label-pos="inside"
            grid-top="12%"
            grid-left="4%"
            grid-bottom="8%"
            :colors="[
              ['#49A6EA', '#73D694'],
              ['#FFFE54', '#FFFE54'],
            ]"
            :limit-colors="['#FF6D6D', '#EABD49']"
            unit="(平米)"
          />
          <Empty v-else />
        </div>
        <div class="schedule-bottom-box2 w619 ml30">
          <Pie-charts
            cid="schedule-rate2"
            :data="dataCount"
            :labels="dataLabels"
            :position="[
              ['35%', '25%'],
              ['35%', '75%'],
              ['65%', '25%'],
              ['65%', '75%'],
            ]"
            :tooltip="false"
            :radius="['22%', '28%']"
            label-size="16px"
            :colors="limitColor"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { scrollSpeed } from "@/utils/common.js";
export default {
  name: "Schedule",
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 排产计划
    scheduleList: {
      type: Array,
      default: () => [],
    },
    // 周转率饼图
    dataCount: {
      type: Array,
      default: () => [],
    },
    // 周转率单位
    dataLabels: {
      type: Array,
      default: () => ["班", "今日", "本周", "本月"],
    },
    // 周转率柱x轴
    turnoverXList: {
      type: Array,
      default: () => [],
    },
    // 周转率柱y轴
    turnoverYList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      limitColor: [
        {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#FF4545" },
            { offset: 0.49, color: "#ED4141" },
          ]),
          bgColor: "#ED414133",
          max: 49,
        },
        {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#ED9E41" },
            { offset: 0.5, color: "#FBFF45" },
            { offset: 0.89, color: "#ED9E41" },
          ]),
          bgColor: "#FBFF4533",
          max: 89,
        },
        {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#44f7af" },
            { offset: 0.5, color: "#43dfcb" },
            { offset: 0.89, color: "#41c6ea" },
            { offset: 1, color: "#44f7af" },
          ]),
          bgColor: "#44f7af33",
          max: 100,
        },
      ],
    };
  },
  watch: {
    scheduleList: {
      handler() {
        this.$nextTick(() => {
          scrollSpeed("table-body", "table-tr");
        });
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.schedule {
  height: 1080px;
  background-color: #051735;
  background: url("~@/assets/img/bg.png");
  &-title {
    width: 63px;
    height: 447px;
    background: url("~@/assets/home/screen-left-title-bg4.png") no-repeat;
    background-size: 100% 100%;
    font-family: YouSheiBlack;
    font-size: 32px;
    color: #45f4ff;
    letter-spacing: 2px;
    writing-mode: vertical-lr;
  }
  &-row {
    height: 100%;
  }
  &-top-box {
    height: 100%;
    background: url("~@/assets/img/bg16.png") no-repeat;
    background-size: 100% 100%;
    padding: 20px 40px;
    .table-th {
      height: 44px;
      width: 100%;
      background-color: #1381ba;
      > div {
        color: #fff;
        font-size: 20px;
        height: 100%;
        line-height: 44px;
        text-align: center;
        flex: 1;
      }
    }
    .table-body {
      height: calc(100% - 44px);
      width: 100%;
      overflow-y: auto;
      .table-tr {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        > div {
          color: #fff;
          font-size: 20px;
          height: 100%;
          line-height: 50px;
          text-align: center;
          flex: 1;
        }
      }
    }
  }
  &-bottom-box1 {
    height: 100%;
    background: url("~@/assets/img/bg17.png") no-repeat;
    background-size: 100% 100%;
  }
  &-bottom-box2 {
    height: 100%;
    background: url("~@/assets/img/bg12.png") no-repeat;
    background-size: 100% 100%;
  }
  #schedule-rate1,
  #schedule-rate2 {
    height: 100%;
    width: 100%;
  }
}
::-webkit-scrollbar {
  display: none !important;
}
</style>
